import React, { useState } from 'react'
import { Settings, FileText, FolderOpen, Play, Upload, Brain } from 'lucide-react'
import Sidebar from './components/Sidebar'
import ConfigPanel from './components/ConfigPanel'
import TaskManager from './components/TaskManager'
import SuiteManager from './components/SuiteManager'
import ExecutionMonitor from './components/ExecutionMonitor'
import FileUpload from './components/FileUpload'

function App() {
  const [activeTab, setActiveTab] = useState('execution')
  const [selectedItem, setSelectedItem] = useState(null)
  const [currentRunId, setCurrentRunId] = useState(null)

  const tabs = [
    {
      id: 'execution',
      name: '执行监控',
      icon: Brain,
      description: '实时监控AI Agent执行过程'
    },
    {
      id: 'tasks',
      name: '任务管理',
      icon: FileText,
      description: '管理测试任务'
    },
    {
      id: 'suites',
      name: '套件管理',
      icon: FolderOpen,
      description: '管理测试套件'
    },
    {
      id: 'upload',
      name: '文件上传',
      icon: Upload,
      description: '上传Excel/Word文件生成任务'
    },
    {
      id: 'config',
      name: '系统配置',
      icon: Settings,
      description: '配置API密钥和系统参数'
    }
  ]

  const renderMainContent = () => {
    switch (activeTab) {
      case 'execution':
        return (
          <ExecutionMonitor 
            selectedItem={selectedItem}
            onRunStart={(runId) => setCurrentRunId(runId)}
            currentRunId={currentRunId}
          />
        )
      case 'tasks':
        return <TaskManager onItemSelect={setSelectedItem} />
      case 'suites':
        return <SuiteManager onItemSelect={setSelectedItem} />
      case 'upload':
        return <FileUpload />
      case 'config':
        return <ConfigPanel />
      default:
        return null
    }
  }

  return (
    <div className="flex h-screen bg-gray-50">
      {/* 侧边栏 */}
      <Sidebar 
        tabs={tabs}
        activeTab={activeTab}
        onTabChange={setActiveTab}
        selectedItem={selectedItem}
        onItemSelect={setSelectedItem}
      />
      
      {/* 主内容区 */}
      <main className="flex-1 overflow-hidden">
        <div className="h-full flex flex-col">
          {/* 头部 */}
          <header className="bg-white border-b border-gray-200 px-6 py-4">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-2xl font-bold text-gray-900">
                  LMTester
                </h1>
                <p className="text-sm text-gray-500 mt-1">
                  AI驱动的Web自动化测试平台
                </p>
              </div>
              
              <div className="flex items-center space-x-4">
                {/* 当前选中项信息 */}
                {selectedItem && (
                  <div className="text-right">
                    <p className="text-sm font-medium text-gray-900">
                      {selectedItem.name}
                    </p>
                    <p className="text-xs text-gray-500">
                      {selectedItem.type === 'task' ? '任务' : '套件'} • {selectedItem.filename}
                    </p>
                  </div>
                )}
                
                {/* 状态指示器 */}
                {currentRunId && (
                  <div className="flex items-center space-x-2 bg-blue-50 px-3 py-2 rounded-lg">
                    <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
                    <span className="text-sm font-medium text-blue-700">
                      执行中: {currentRunId.slice(0, 8)}
                    </span>
                  </div>
                )}
              </div>
            </div>
          </header>
          
          {/* 主要内容 */}
          <div className="flex-1 overflow-hidden p-6">
            <div className="h-full bg-white rounded-lg shadow-sm border border-gray-200">
              {renderMainContent()}
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}

export default App